<template>
	<view class="">
		<!-- navbar -->
		<u-navbar leftText=" " title="订单" :safeAreaInsetTop="true" :placeholder="true">
			<view class="u-nav-slot" slot="left">
			</view>
		</u-navbar>
		<view class="mainBox">
			<!-- tabs -->
			<view class="top_tabs flex">
				<view class="tabs_item flexC" v-for="item in list" :key="item.id"
					:class="status == item.id?'highLight':'nolight'" @click="change(item.id)">
					{{item.name}}
				</view>
			</view>
			<!-- 内容 -->
			<view class="cont_box" v-for="(it,idx) in orderList" :key="it.order_id">
				<view class="cont_title">{{it.goods_name}}</view>
				<view class="cont_position">{{it.pladress}}</view>
				<view class="cont_time flexJ">
					<view class="time">
						<text>{{$u.timeFormat(it.server_start_time, 'yyyy-mm-dd hh:MM')}}</text>
						-
						<text>{{$u.timeFormat(it.server_end_time, 'hh:MM')}}</text>

					</view>
					<template v-if="status ===2">
						<view class="complate" @click="tocomplete(it.order_id)">去完成</view>
					</template>
				</view>
			</view>
			<view class="" style="height: 100rpx;">

			</view>
		</view>
		<BtnTabbar :value="0"></BtnTabbar>

	</view>
</template>

<script>
	import BtnTabbar from "@/components/BtnTabbar/BtnTabbar.vue"
	export default {
		components: {
			BtnTabbar
		},
		data() {
			return {
				list: [{
					name: '待完成',
					id: 2
				}, {
					name: '已完成',
					id: 6
				}],
				status: 2,
				orderList: [],
				last_page: null, // 总页数
				page: 1, //当前页
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.merchOrderList(2)
		},
		async onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				let res = await this.$api.merchOrderList({
					status: this.status, //2待完成 6完成
					page: this.page,
					total: 5
				})
				this.orderList.push(...res.data.data)
			} else {
				this.$u.toast('已经到底了！')
			}
		},
		methods: {
			//tabs切换
			change(id) {
				this.status = id
				this.page = 1
				this.merchOrderList(id)
			},
			//去完成
			tocomplete(id) {
				uni.navigateTo({
					url: `/subPages/merchant/toComplete?id=${id}`
				})
			},
			async merchOrderList(id) {
				let res = await this.$api.merchOrderList({
					status: id, //2待完成 6完成
					page: 1,
					total: 5
				})
				this.orderList = res.data.data
				this.last_page = res.data.last_page
				// console.log(res);
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped lang="scss">
	.mainBox {
		width: 702rpx;
		margin: 32rpx auto 0;
	}

	.highLight {
		background-color: #806EFE;
		color: #fff;
	}

	.nolight {
		color: rgba(0, 0, 0, 0.8);
		background-color: #F8F9FE;
	}

	.top_tabs {
		width: 702rpx;
		height: 84rpx;
		background-color: #F8F9FE;
		border-radius: 160rpx;

		.tabs_item {
			flex: 1;
			border-radius: 600rpx;
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.cont_box {
		margin-top: 32rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: rgba(248, 249, 254, 1);

		.cont_title {
			margin-bottom: 32rpx;
			color: rgba(0, 0, 0, 0.8);
			font-size: 32rpx;
			font-weight: 700;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.cont_position {
			margin-bottom: 32rpx;
			color: rgba(0, 0, 0, 0.8);
			font-size: 28rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.cont_time {
			.time {
				width: 430rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				color: rgba(0, 0, 0, 0.55);
				font-size: 28rpx;
			}

			.complate {
				padding: 12rpx 40rpx;
				color: rgba(255, 255, 255, 1);
				font-size: 24rpx;
				font-weight: 700;
				border-radius: 80rpx;
				opacity: 1;
				background: radial-gradient(235.8% 163.9% at 132.1% 0%, rgba(255, 245, 252, 1) 0%, rgba(208, 132, 255, 1) 23%, rgba(121, 101, 255, 1) 56.99999999999999%, rgba(131, 111, 255, 1) 82%, rgba(130, 111, 255, 1) 100%);
			}
		}
	}
</style>
